<template>
  <div class="_main">
    <div class="_main-txt">Price</div>
    <div class="_main_inpt">
      <div>{{ props.item.unit }}</div>
      <input type="text" :value="fromWei(props.item.total_price)" readonly>
    </div>
    <div class="_log_btn">
      <div :class="props.allow?'active':'no-active'" @click="props.buy">Buy Now</div>
      <div :class="!props.allow?'active':'no-active'" @click="props.approve">Approve</div>
    </div>
  </div>
</template>

<script setup>
import {defineProps, ref} from "vue";
import {allowance, getAddress, getBalance} from "../../../dapp";

const allow = ref(false)

const props = defineProps({
  allow: {
    type: Boolean
  },
  item: {
    type: Object
  },
  approve: {
    type: Function
  },
  buy: {
    type: Function
  },
})

</script>

<style scoped lang="scss">
  ._main {
    padding: 26px;
  }
  ._main-txt {
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #383838;
  }
  ._main_inpt {
    display: flex;
    align-items: center;
    border-radius: 1px;
    border: 1px solid #D9D9D9;
    margin-top: 8px;
    div {
      width: 91px;
      height: 47px;
      background: #F9F9F9;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #383838;
      line-height: 47px;
      text-align: center;
    }
    input {
      flex: 1;
      height: 47px;
      border: none;
      padding: 0 13px;
      text-align: right;
    }
  }
  ._log_btn {
    display: flex;
    align-items: center;
    margin-top: 29px;
    justify-content: space-between;
    div {
      width: 206px;
      height: 45px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #383838;
      line-height: 45px;
      text-align: center;
      cursor: pointer;
      &.active {
         background: #FCC33C;
      }
      &.no-active {
         background-color: #EBEBEB;
      }
    }
  }
  @media screen and (max-width: 750px) {
    ._log_btn {
    div {
      width: 140px;
    }
  }
  }
</style>
